<template>
	<view class="bigBox">
		<u-toast ref="uToast"></u-toast>
		<u-navbar :titleStyle="{color:'#fff'}" title='编辑动态发布' :autoBack="true" bgColor='#000'>
			<view class="u-nav-slot left" slot='left'>
				<u-icon name="arrow-left-double" size="50rpx" color='#fff'></u-icon>
			</view>
		</u-navbar>
		<view class="videoBox"
			style="height: 570rpx;display: flex;flex-direction: column;align-items: center;justify-content: flex-end;">
			<view v-if="!scsp" @click="scvideo"
				style="width: 750rpx;height:570rpx;display: flex;flex-direction: column;align-items: center;justify-content: flex-start;margin-top: 60rpx;">
				<u-icon style='padding-top: 100rpx;' name="plus" color="#fff" size="80"></u-icon>
				<text>上传视频</text>
			</view>
			<view v-if="scsp" class="pic">
				<video id="myVideo" :src="scsp" @error="videoErrorCallback" enable-danmu controls></video>
				<u-icon @click="delvideo" style='position: absolute;right:0;top:-60rpx;' name='close-circle-fill'
					size='30' color='red'></u-icon>
			</view>
			<!-- <uploadFile></uploadFile> -->
		</view>

		<u-upload style='flex: 0;' :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple :maxCount="1"
			:previewFullImage="true">
			<view class="videoBox">
				<view v-if="!imageUrl"
					style="width: 750rpx;display: flex;flex-direction: column;align-items: center;justify-content: flex-start;">
					<u-icon style='padding-top: 20rpx;' name="plus" color="#fff" size="80"></u-icon>
					<text>上传视频封面</text>
				</view>
				<view v-if="imageUrl" class="img">
					<image :src="imageUrl" mode="heightFix" style="height: 300rpx;"></image>
				</view>
			</view>
		</u-upload>
		<view class="videoBox">
			<u--textarea style='background-color: transparent;padding-bottom: 0;padding-top: 0;' v-model="value2" border="bottom" height='300rpx' placeholder="编辑动态内容" count maxlength='200'></u--textarea>
		</view>
		<view class="videoBox">
			<text>已选话题 {{tabList1.length}}/3</text>
			<view class="tab">
				<template v-for='(item,index) in tabList1'>
					<u-tag :text="item" closable :name="index" @close="delTab"></u-tag>
				</template>
			</view>
			<u-divider text="选择话题"></u-divider>
			<view class="tab">
				<template v-for="(item,index) in tabList2">
					<u-tag style='margin-left: 20rpx;' :text="item" :name='index' @click='addTab'></u-tag>
				</template>
			</view>
		</view>
		<view class="btn">
			发 布
		</view>
	</view>
</template>

<script>
	import uploadFile from '@/uitils/upVideo.vue';
	export default {
		components: {
			uploadFile
		},
		data() {
			return {
				fileList2: [],
				fileList3: [],
				showVideo: false,
				addVideo: true,
				scsp: '',
				imageUrl: '',
				value2:'',
				close2:true,
				tabList1:[],
				tabList2:['#测试1','#测试2','#测试3']
			}
		},
		methods: {
			addTab(index){
				console.log(index)
				if(this.tabList1.length==3){
					this.$refs.uToast.show({
						type: 'error',
						icon: false,
						message: "最多只可以选择三个话题"
					})
					return
				}
				if(this.tabList1.indexOf(this.tabList2[index])==-1){
					this.tabList1.push(this.tabList2[index])
				}else{
					this.$refs.uToast.show({
						type: 'error',
						icon: false,
						message: "不可以重复添加话题"
					})
				}
			},
			delTab(index){
				this.tabList1.splice(index,1)
			},
			delImage() {
				this.imageUrl = ''
			},
			afterRead(event) {
				this.imageUrl = event.file[0].url
				console.log(event.file[0].url)
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			scvideo: function() {
				var self = this;
				uni.chooseVideo({
					count: 1,
					compressed: false,
					sourceType: ['album'],
					// , 'camera'
					success: function(res) {
						console.log(res)
						// console.log("选择视频成功", res)
						self.showVideo = true
						self.addVideo = false;
						self.scsp = res.tempFilePath;
						self.timer = res.duration
						uni.showLoading({
							title: '上传中...',
							mask: !0
						})
						self.isvideo = false;
						uni.uploadFile({
							url: 'https://api.zwhero.com/api/User/PostFormData',
							filePath: res.tempFilePath,
							// files:res,
							header: {
								'TokenValue': ''
							},
							name: 'file',
							fileType: 'video',
							success: (res) => {
								console.log(res)
								self.isvideo = true;
								let videodata = JSON.parse(res.data)
								if (videodata.code != '200') {
									uni.showToast({
										title: videodata.msg,
										icon: 'none'
									})
									uni.hideLoading()
									return
								}
								// self.scsp=videodata.url;
								uni.hideLoading()
							},
							fail: (err) => {
								console.log(err)
								self.isvideo = false;
								uni.showToast({
									icon: 'none',
									title: '视频上传失败，请重新上传。'
								})
								uni.hideLoading()
							}
						})
					}
				});
			},
			delvideo() {
				this.scsp = '',
					this.showVideo = false,
					this.addVideo = true
			},
			deletePic(index, file, name) {
				console.log(index)
			}
		}
	}
</script>

<style>
	.bigBox {
		display: flex;
		flex-direction: column;
		padding-top: 220rpx;
		padding-bottom: 100rpx;
		height: 100vh;
		background-color: #000;
	}
	.uni-textarea-textarea{
		color: #fff;
	}
	.tab{
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	.btn{
		width: 670rpx;
		margin-top: 40rpx;
		margin-left: 40rpx;
		height: 90rpx;
		line-height: 90rpx;
		background-color: rgba(22, 132, 252, 100);
		color: rgba(255, 255, 255, 100);
		font-size: 28px;
		text-align: center;
		font-family: Arial;
	}
</style>
<style lang="less">
	.videoBox {
		position: relative;
		width: 750rpx;
		height: 300rpx;
		color: white;
		border-bottom: 4rpx solid #fff;
	}
	
	.img {
		height: 300rpx;
		width: 750rpx;
		position: relative;
		border: 1px solid #fff;
		display: flex;
		align-items: center;
		justify-content: center;

		video,
		image {
			height: 550rpx;
			width: 750rpx;
		}
	}

	.pic {
		height: 550rpx;
		width: 750rpx;
		position: relative;

		video,
		image {
			height: 550rpx;
			width: 750rpx;
		}
	}
</style>
